<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="http://localhost:8000/">
    <title>测试用例编辑器 - PowerOne 自动化测试工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../node_modules/monaco-editor/min/vs/loader.css"/>
    <script src="../../node_modules/monaco-editor/min/vs/loader.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        dark: '#1D2129',
                        darker: '#0F172A',
                        'dark-card': '#272E3B',
                        'dark-hover': '#374151',
                        'editor-bg': '#1E1E1E',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .step-active {
                @apply border-primary bg-primary/10;
            }
            .step-inactive {
                @apply border-gray-600 bg-dark-card hover:border-gray-400 transition-colors;
            }
            .draggable-item {
                @apply cursor-move bg-dark-card border border-gray-600 rounded-lg p-3 mb-2 hover:border-primary transition-colors;
            }
        }
    </style>
</head>
<body class="bg-darker text-gray-200 font-inter h-screen flex flex-col overflow-hidden">
    <!-- Header -->
    <header class="bg-dark border-b border-gray-700 py-3 px-4 flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <button class="lg:hidden text-gray-400 hover:text-white">
                <i class="fa fa-bars text-xl"></i>
            </button>
            <div class="flex items-center">
                <div class="w-8 h-8 rounded-md bg-primary flex items-center justify-center mr-2">
                    <i class="fa fa-cogs text-white"></i>
                </div>
                <h1 class="text-xl font-bold text-white">PowerOne</h1>
            </div>
        </div>
        <div class="flex items-center space-x-6">
            <div class="flex items-center space-x-3">
                <button class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg text-sm font-medium transition-colors flex items-center">
                    <i class="fa fa-save mr-2"></i> 保存
                </button>
                <button class="px-4 py-2 bg-success hover:bg-success/90 text-white rounded-lg text-sm font-medium transition-colors flex items-center">
                    <i class="fa fa-play mr-2"></i> 运行
                </button>
                <button class="relative text-gray-400 hover:text-white">
                    <i class="fa fa-bell text-xl"></i>
                </button>
                <div class="flex items-center space-x-2">
                    <img src="https://images.pexels.com/photos/1805164/pexels-photo-1805164.jpeg?auto=format&fit=crop&w=100&q=80" alt="User Avatar" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
                </div>
            </div>
        </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
        <!-- Sidebar -->
        <aside class="bg-dark w-16 lg:w-64 border-r border-gray-700 flex flex-col transition-all duration-300">
            <nav class="flex-1 py-4 overflow-y-auto scrollbar-hide">
                <ul class="space-y-1 px-2">
                    <li>
                        <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white transition-colors">
                            <i class="fa fa-tachometer text-xl w-6 text-center"></i>
                            <span class="lg:inline text-sm font-medium">控制台</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white transition-colors">
                            <i class="fa fa-folder-open text-xl w-6 text-center"></i>
                            <span class="lg:inline text-sm font-medium">项目管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg bg-primary/10 text-primary">
                            <i class="fa fa-list-alt text-xl w-6 text-center"></i>
                            <span class="lg:inline text-sm font-medium">测试用例</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white transition-colors">
                            <i class="fa fa-play-circle text-xl w-6 text-center"></i>
                            <span class="lg:inline text-sm font-medium">测试执行</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white transition-colors">
                            <i class="fa fa-bar-chart text-xl w-6 text-center"></i>
                            <span class="lg:inline text-sm font-medium">测试报告</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 overflow-hidden flex flex-col">
            <!-- Test Case Header -->
            <div class="bg-dark-card border-b border-gray-700 p-4">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                    <div>
                        <div class="flex items-center">
                            <h2 class="text-xl font-bold text-white">用户登录测试用例</h2>
                            <span class="ml-3 px-2 py-0.5 bg-warning/20 text-warning text-xs rounded-full">未完成</span>
                        </div>
                        <p class="text-gray-400 text-sm mt-1">电商平台UI自动化 / 登录模块</p>
                    </div>
                    <div class="flex items-center space-x-4 mt-4 md:mt-0">
                        <div class="flex items-center space-x-2">
                            <span class="text-sm text-gray-400">上次编辑:</span>
                            <span class="text-sm text-gray-300">今天 15:20</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="text-sm text-gray-400">版本:</span>
                            <span class="text-sm text-gray-300">v1.2</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Editor Tabs -->
            <div class="bg-dark border-b border-gray-700 flex">
                <button class="px-6 py-3 text-primary border-b-2 border-primary font-medium text-sm flex items-center">
                    <i class="fa fa-mouse-pointer mr-2"></i> 可视化编辑
                </button>
                <button class="px-6 py-3 text-gray-400 hover:text-white font-medium text-sm flex items-center">
                    <i class="fa fa-code mr-2"></i> 脚本模式
                </button>
                <button class="px-6 py-3 text-gray-400 hover:text-white font-medium text-sm flex items-center">
                    <i class="fa fa-table mr-2"></i> 参数化
                </button>
                <button class="px-6 py-3 text-gray-400 hover:text-white font-medium text-sm flex items-center">
                    <i class="fa fa-link mr-2"></i> 依赖管理
                </button>
            </div>

            <!-- Visual Editor Content -->
            <div class="flex-1 overflow-hidden flex">
                <!-- Step Library -->
                <div class="w-64 border-r border-gray-700 bg-dark p-4 overflow-y-auto">
                    <h3 class="text-sm font-semibold text-gray-300 uppercase mb-4">步骤库</h3>
                    <div class="space-y-4">
                        <div>
                            <h4 class="text-xs text-gray-500 uppercase mb-2">页面操作</h4>
                            <div class="space-y-1">
                                <div class="draggable-item" draggable="true">
                                    <div class="flex items-center">
                                        <i class="fa fa-external-link text-primary mr-2"></i>
                                        <span class="text-sm">打开页面</span>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-1">导航到指定URL</p>
                                </div>
                                <div class="draggable-item" draggable="true">
                                    <div class="flex items-center">
                                        <i class="fa fa-refresh text-primary mr-2"></i>
                                        <span class="text-sm">刷新页面</span>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-1">重新加载当前页面</p>
                                </div>
                                <div class="draggable-item" draggable="true">
                                    <div class="flex items-center">
                                        <i class="fa fa-arrow-left text-primary mr-2"></i>
                                        <span class="text-sm">后退页面</span>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-1">返回上一页</p>
                                </div>
                            </div>
                        </div>

                        <div>
                            <h4 class="text-xs text-gray-500 uppercase mb-2">元素操作</h4>
                            <div class="space-y-1">
                                <div class="draggable-item" draggable="true">
                                    <div class="flex items-center">
                                        <i class="fa fa-mouse-pointer text-primary mr-2"></i>
                                        <span class="text-sm">点击元素</span>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-1">点击指定页面元素</p>
                                </div>
                                <div class="draggable-item" draggable="true">
                                    <div class="flex items-center">
                                        <i class="fa fa-keyboard-o text-primary mr-2"></i>
                                        <span class="text-sm">输入文本</span>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-1">向输入框输入文本</p>
                                </div>
                                <div class="draggable-item" draggable="true">
                                    <div class="flex items-center">
                                        <i class="fa fa-check-square-o text-primary mr-2"></i>
                                        <span class="text-sm">选择复选框</span>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-1">选中或取消复选框</p>
                                </div>
                            </div>
                        </div>

                        <div>
                            <h4 class="text-xs text-gray-500 uppercase mb-2">断言验证</h4>
                            <div class="space-y-1">
                                <div class="draggable-item" draggable="true">
                                    <div class="flex items-center">
                                        <i class="fa fa-check-circle text-success mr-2"></i>
                                        <span class="text-sm">元素存在</span>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-1">验证元素是否存在</p>
                                </div>
                                <div class="draggable-item" draggable="true">
                                    <div class="flex items-center">
                                        <i class="fa fa-font text-success mr-2"></i>
                                        <span class="text-sm">文本匹配</span>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-1">验证元素文本内容</p>
                                </div>
                                <div class="draggable-item" draggable="true">
                                    <div class="flex items-center">
                                        <i class="fa fa-exclamation-circle text-warning mr-2"></i>
                                        <span class="text-sm">等待元素</span>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-1">等待元素加载完成</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Test Case Flow -->
                <div class="flex-1 bg-darker p-6 overflow-y-auto">
                    <div class="max-w-3xl mx-auto">
                        <div class="bg-dark-card rounded-xl p-6 mb-6">
                            <h3 class="text-lg font-semibold text-white mb-4">测试步骤</h3>
                            <p class="text-sm text-gray-400 mb-6">将左侧步骤拖放到此处，构建测试流程</p>

                            <div class="border-2 border-dashed border-gray-600 rounded-lg p-4 min-h-[300px] mb-4">
                                <!-- Dropped Steps -->
                                <div class="space-y-3">
                                    <div class="step-active rounded-lg p-4 relative">
                                        <div class="absolute -left-2 top-4 w-4 h-4 rounded-full bg-primary flex items-center justify-center text-white text-xs">1</div>
                                        <div class="ml-4">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center">
                                                    <i class="fa fa-external-link text-primary mr-2"></i>
                                                    <span class="text-sm font-medium">打开页面</span>
                                                </div>
                                                <div class="flex space-x-2">
                                                    <button class="text-gray-400 hover:text-white"><i class="fa fa-arrows"></i></button>
                                                    <button class="text-gray-400 hover:text-white"><i class="fa fa-trash"></i></button>
                                                </div>
                                            </div>
                                            <div class="mt-3 ml-6">
                                                <div class="text-xs text-gray-400 mb-1">URL地址</div>
                                                <input type="text" value="https://example.com/login" class="w-full bg-dark border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="step-active rounded-lg p-4 relative">
                                        <div class="absolute -left-2 top-4 w-4 h-4 rounded-full bg-primary flex items-center justify-center text-white text-xs">2</div>
                                        <div class="ml-4">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center">
                                                    <i class="fa fa-keyboard-o text-primary mr-2"></i>
                                                    <span class="text-sm font-medium">输入文本</span>
                                                </div>
                                                <div class="flex space-x-2">
                                                    <button class="text-gray-400 hover:text-white"><i class="fa fa-arrows"></i></button>
                                                    <button class="text-gray-400 hover:text-white"><i class="fa fa-trash"></i></button>
                                                </div>
                                            </div>
                                            <div class="mt-3 ml-6 space-y-4">
                                                <div>
                                                    <div class="text-xs text-gray-400 mb-1">目标元素</div>
                                                    <select class="w-full bg-dark border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                                                        <option>用户名输入框 - #username</option>
                                                        <option>密码输入框 - #password</option>
                                                        <option>验证码输入框 - #captcha</option>
                                                    </select>
                                                </div>
                                                <div>
                                                    <div class="text-xs text-gray-400 mb-1">输入内容</div>
                                                    <input type="text" value="test_user" class="w-full bg-dark border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="step-active rounded-lg p-4 relative">
                                        <div class="absolute -left-2 top-4 w-4 h-4 rounded-full bg-primary flex items-center justify-center text-white text-xs">3</div>
                                        <div class="ml-4">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center">
                                                    <i class="fa fa-keyboard-o text-primary mr-2"></i>
                                                    <span class="text-sm font-medium">输入文本</span>
                                                </div>
                                                <div class="flex space-x-2">
                                                    <button class="text-gray-400 hover:text-white"><i class="fa fa-arrows"></i></button>
                                                    <button class="text-gray-400 hover:text-white"><i class="fa fa-trash"></i></button>
                                                </div>
                                            </div>
                                            <div class="mt-3 ml-6 space-y-4">
                                                <div>
                                                    <div class="text-xs text-gray-400 mb-1">目标元素</div>
                                                    <select class="w-full bg-dark border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                                                        <option>用户名输入框 - #username</option>
                                                        <option selected>密码输入框 - #password</option>
                                                        <option>验证码输入框 - #captcha</option>
                                                    </select>
                                                </div>
                                                <div>
                                                    <div class="text-xs text-gray-400 mb-1">输入内容</div>
                                                    <input type="password" value="******" class="w-full bg-dark border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="step-inactive rounded-lg p-4 relative">
                                        <div class="absolute -left-2 top-4 w-4 h-4 rounded-full bg-gray-500 flex items-center justify-center text-white text-xs">4</div>
                                        <div class="ml-4">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center">
                                                    <i class="fa fa-mouse-pointer text-gray-400 mr-2"></i>
                                                    <span class="text-sm font-medium">点击元素</span>
                                                </div>
                                                <div class="flex space-x-2">
                                                    <button class="text-gray-400 hover:text-white"><i class="fa fa-arrows"></i></button>
                                                    <button class="text-gray-400 hover:text-white"><i class="fa fa-trash"></i></button>
                                                </div>
                                            </div>
                                            <div class="mt-3 ml-6">
                                                <div class="text-xs text-gray-400 mb-1">目标元素</div>
                                                <select class="w-full bg-dark border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                                                    <option>登录按钮 - #loginBtn</option>
                                                    <option>忘记密码 - #forgotPwd</option>
                                                    <option>注册账号 - #register</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Preview Section -->
                        <div class="bg-dark-card rounded-xl p-4">
                            <h3 class="text-sm font-semibold text-gray-300 mb-4">页面预览</h3>
                            <div class="relative rounded-lg overflow-hidden border border-gray-600 bg-white">
                                <img src="https://images.pexels.com/photos/1805164/pexels-photo-1805164.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="测试场景示例" class="w-full h-48 object-cover rounded-lg mb-4">
                                <!-- Highlighted Elements -->
                                <div class="absolute top-1/3 left-1/4 w-64 h-8 border-2 border-primary rounded pointer-events-none"></div>
                                <div class="absolute top-1/2 left-1/4 w-64 h-8 border-2 border-primary rounded pointer-events-none"></div>
                                <div class="absolute top-2/3 left-1/3 w-32 h-10 bg-primary/30 border-2 border-primary rounded pointer-events-none"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Properties Panel -->
                <div class="w-72 border-l border-gray-700 bg-dark p-4 overflow-y-auto">
                    <h3 class="text-sm font-semibold text-gray-300 uppercase mb-4">属性面板</h3>
                    <div class="space-y-6">
                        <div>
                            <h4 class="text-xs text-gray-500 uppercase mb-2">用例属性</h4>
                            <div class="space-y-3">
                                <div>
                                    <label class="text-xs text-gray-400 block mb-1">用例名称</label>
                                    <input type="text" value="用户登录测试用例" class="w-full bg-dark-card border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                                </div>
                                <div>
                                    <label class="text-xs text-gray-400 block mb-1">描述</label>
                                    <textarea class="w-full bg-dark-card border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary h-20 resize-none">验证用户使用正确账号密码登录系统的流程</textarea>
                                </div>
                                <div>
                                    <label class="text-xs text-gray-400 block mb-1">优先级</label>
                                    <select class="w-full bg-dark-card border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                                        <option>低</option>
                                        <option selected>中</option>
                                        <option>高</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div>
                            <h4 class="text-xs text-gray-500 uppercase mb-2">执行配置</h4>
                            <div class="space-y-3">
                                <div>
                                    <label class="text-xs text-gray-400 block mb-1">浏览器</label>
                                    <select class="w-full bg-dark-card border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                                        <option selected>Chrome</option>
                                        <option>Firefox</option>
                                        <option>Edge</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="text-xs text-gray-400 block mb-1">窗口大小</label>
                                    <select class="w-full bg-dark-card border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                                        <option>800x600</option>
                                        <option selected>1280x720</option>
                                        <option>1920x1080</option>
                                        <option>最大化</option>
                                    </select>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="headlessMode" class="mr-2">
                                    <label for="headlessMode" class="text-xs text-gray-300">无头模式运行</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="screenshotOnFail" checked class="mr-2">
                                    <label for="screenshotOnFail" class="text-xs text-gray-300">失败时截图</label>
                                </div>
                            </div>
                        </div>

                        <div>
                            <h4 class="text-xs text-gray-500 uppercase mb-2">元素定位</h4>
                            <div class="space-y-3">
                                <div>
                                    <label class="text-xs text-gray-400 block mb-1">定位方式</label>
                                    <select class="w-full bg-dark-card border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                                        <option>ID</option>
                                        <option>Name</option>
                                        <option selected>CSS Selector</option>
                                        <option>XPath</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="text-xs text-gray-400 block mb-1">定位值</label>
                                    <input type="text" value="button[type='submit']" class="w-full bg-dark-card border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                                </div>
                                <div>
                                    <button class="w-full py-2 border border-gray-600 rounded text-xs text-gray-300 hover:bg-dark-hover transition-colors">
                                        <i class="fa fa-search mr-1"></i> 验证定位
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        // Initialize Monaco Editor for script mode (hidden by default)
        require.config({
            paths: {
                'vs': '../../node_modules/monaco-editor/min/vs/'
            }
        });

        // Simple drag and drop implementation
        document.addEventListener('DOMContentLoaded', function() {
            const draggables = document.querySelectorAll('.draggable-item');
            const dropZone = document.querySelector('.border-dashed');

            draggables.forEach(item => {
                item.addEventListener('dragstart', function(e) {
                    e.dataTransfer.setData('text/plain', this.innerHTML);
                    setTimeout(() => this.classList.add('opacity-50'), 0);
                });

                item.addEventListener('dragend', function() {
                    this.classList.remove('opacity-50');
                });
            });

            if (dropZone) {
                dropZone.addEventListener('dragover', function(e) {
                    e.preventDefault();
                    this.classList.add('border-primary');
                });

                dropZone.addEventListener('dragleave', function() {
                    this.classList.remove('border-primary');
                });

                dropZone.addEventListener('drop', function(e) {
                    e.preventDefault();
                    this.classList.remove('border-primary');
                    const data = e.dataTransfer.getData('text/plain');
                    // In a real implementation, we would create a new step here
                    console.log('Dropped content:', data);
                });
            }

            // Tab switching functionality
            const tabs = document.querySelectorAll('.bg-dark button');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // Remove active state from all tabs
                    tabs.forEach(t => {
                        t.classList.remove('text-primary', 'border-b-2', 'border-primary');
                        t.classList.add('text-gray-400');
                    });

                    // Add active state to clicked tab
                    this.classList.add('text-primary', 'border-b-2', 'border-primary');
                    this.classList.remove('text-gray-400');

                    // In a real implementation, we would switch content here
                });
            });
        });
    </script>
</body>
</html>